<template>
  <div class="leimu">
    <h4>类目热销榜</h4>
    <div class="leimu-top">
      <div class="left">
        <span>居家生活榜</span>
        <img
          src="https://yanxuan-item.nosdn.127.net/307a97ed1516fc2906a2cfa1680281bb.png"
          alt=""
        />
      </div>
      <div class="right">
        <span>美食酒水榜</span>
        <img
          src="https://yanxuan-item.nosdn.127.net/e440f73ceea9aebd25630e2906c0919e.png?quality=75&type=webp&imageView&thumbnail=200x200"
          alt=""
        />
      </div>
    </div>
    <div class="leimu-bottom">
      <van-grid :column-num="4">
        <van-grid-item v-for="(v, index) in arr" :key="index">
          <p>{{ v.msg }}</p>
          <van-image :src="v.img" />
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>

<script>
import axios from "axios";
let service = axios.create();
export default {
  data() {
    return {
      arr: [],
    };
  },
  mounted() {
    service({
      url: " http://localhost:3000/hot",
      method: "get",
    }).then((res) => {
      res.data.forEach((element) => {
        this.arr.push(element);
      });
    });
  },
};
</script>

<style scoped>
.van-grid-item {
  background: #eee;
}
.leimu h4 {
  font-weight: normal;
  margin: 0.9375rem 0.9375rem;
}

.leimu-top {
  height: 6.25rem;
  display: flex;
  justify-content: space-evenly;
}

.leimu-top div {
  width: 10.75rem;
  line-height: 4.25rem;
  font-size: 0.8125rem;
  display: flex;
  justify-content: space-between;
  padding-left: 0.9375rem;
  box-sizing: border-box;
}

.leimu-top div img {
  width: 5.6875rem;
  height: 5.6875rem;
}

.leimu-top div span {
  position: relative;
  width: 100px;
}

.leimu-top div span::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 2.84rem;
  width: 1.48rem;
  height: 0.08rem;
  background: #333;
}

.leimu-top .left {
  background: #f9f3e4;
  margin-right: 0.2rem;
}

.leimu-top .right {
  background: #ebeff6;
}
.van-image img {
  width: 2.8125rem;
  height: 2.9375rem;
}
.leimu-bottom {
  font-size: 0.375rem;
  margin-top: 0.2rem;
  margin-bottom: 1.0625rem;
  padding: 0.4rem;
}
.leimu-bottom .van-grid-item {
  width: 5.3125rem;
  height: 6.625rem;
  padding-bottom: 0.125rem;
}
.leimu-bottom .van-grid-item .van-grid-item__content {
  margin: 0 0.2rem 0.2rem 0;
  padding: 0.625rem;
  background: #f5f5f5;
}
</style>